<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_state</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下
      1. 显示h2标题, 初始文本为: 你喜欢我
      2. 点击标题更新为: 我喜欢你
    */

    // 1. 定义组件
    class Like extends React.Component {
        constructor(props) {
            super(props);
            // 初始化状态
            this.state = {
                isLikeMe: false
            }
            // 将自定义方法中的this强制绑定为组件对象
            // bind() 会创建一个新的函数，函数里面的this是我们指定的对象，函数体就是调用bind() 方法的函数的函数体
            // 把创建出来的函数赋值给当前这个对象的handleClick
            // this.handleClick = this.handleClick.bind("hello world");
            this.handleClick = this.handleClick.bind(this);

        }

        // 自定义的方法：内部的this默认不是组件对象，而是undefined
        handleClick() {
            console.log("handleClick()", this);

            // 更新转态
            let isLikeMe = !this.state.isLikeMe;

            // React设置属性的方法
            this.setState({isLikeMe});

        }

        // 重写组件类的方法
        render() {
            // 读取状态
            // const x = this.state.isLikeMe;
            const {isLikeMe} = this.state; // 解构写法
            return <h2 onClick={this.handleClick}>{isLikeMe ? '你喜欢我' : '我喜欢你'}</h2>; // 要写js代码就以{ 开头
            /*return <h2 onClick={this.handleClick.bind(this)}>{isLikeMe ? '你喜欢我' : '我喜欢你'}</h2>; // 也可以在这里绑定，但是效率低，因为每次渲染都会创建一个函数*/

        }
    }

    // 2. 渲染组件标签
    ReactDOM.render(<Like/>, document.getElementById("example"));
</script>
</body>
</html>

